<template>
  <div class="box detailBox" @scroll="onScroll" ref="detailBox">
    <van-nav-bar left-arrow class="detail-nav-bar1" @click-left="onClickLeft">
      <template #right>
        <van-popover
          v-model="showPopover"
          trigger="click"
          :actions="actions"
          @select="onSelect"
          placement="bottom-end"
        >
          <template #reference>
            <van-icon name="ellipsis" size="18" />
          </template>
        </van-popover>
      </template>
    </van-nav-bar>
    <van-nav-bar title="商品详情" left-arrow class="detail-nav-bar2" @click-left="onClickLeft">
      <template #right>
        <van-popover
          v-model="showPopover"
          trigger="click"
          :actions="actions"
          @select="onSelect"
          placement="bottom-end"
        >
          <template #reference>
            <van-icon name="ellipsis" size="18" />
          </template>
        </van-popover>
      </template>
    </van-nav-bar>
    <van-swipe class="my-swipe" indicator-color="white" :initial-swipe="index" @change="onChange" ref="mySwipe">
      <van-swipe-item v-for="item in imgList" :key="item" @click="onImgPreView">
        <van-image
          width="100vw"
          height="3rem"
          fit="contain"
          :src="item"
        />
      </van-swipe-item>
    </van-swipe>
    <h1>商品名称：{{data.proName}}</h1>
    <p>原价：<del>{{data.price}}</del></p>
    <p>折扣：{{data.discount}}</p>
    <p>现价：<span>{{data.price*data.discount/10}}</span></p>
    <p>销量：{{data.sales}}</p>
    <p>库存：{{data.stock}}</p>
    <p>评分：{{data.tip}}</p>
    <p>分类：{{data.kind}}</p>
    <p>品牌：{{data.brand}} <img :src="data.logo" width="80"></p>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" badge="0" @click="$router.push('/cart')" />
      <van-goods-action-icon icon="star-o" text="收藏" color="#ff5000" />
      <van-goods-action-button type="warning" text="加入购物车" @click="onAddCart" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { getDetail, addCart } from '@/api/request.js'
import Vue from 'vue'
import { NavBar, Icon, Swipe, SwipeItem, Image as VanImage, ImagePreview, GoodsAction, GoodsActionIcon, GoodsActionButton, Popover, Toast } from 'vant'

Vue.use(NavBar)
Vue.use(Icon)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(VanImage)
Vue.use(ImagePreview)
Vue.use(GoodsAction)
Vue.use(GoodsActionIcon)
Vue.use(GoodsActionButton)
Vue.use(Popover)
Vue.use(Toast)

export default {
  data () {
    return {
      imgList: [
        'https://img01.yzcdn.cn/vant/apple-1.jpg',
        'https://img01.yzcdn.cn/vant/apple-2.jpg'
      ],
      index: 0,
      data: {},
      showPopover: false,
      actions: [{ text: '首页', path: '/home' }, { text: '分类', path: '/kind' }, { text: '购物车' }, { text: '我的' }, { text: '搜索' }, { text: '分享' }]
    }
  },
  mounted () {
    getDetail({
      id: this.$route.params.id
    }).then(data => {
      this.imgList.unshift(data.data.msg.img)
      this.data = data.data.msg
    })
  },
  methods: {
    onScroll () {
      // console.log(this.$refs.detailBox.scrollTop)
      document.querySelector('.detail-nav-bar2').style.opacity = this.$refs.detailBox.scrollTop / 100
    },
    onImgPreView () {
      // 点击轮播图时,通过数据拿到当前索引,根据当前索引创建图片预览,设置默认图片
      const that = this
      ImagePreview({
        images: this.imgList,
        startPosition: this.index,
        onChange (i) {
          // 当图片预览切换时,根据切换后的索引,设置轮播图的位置
          that.$refs.mySwipe.swipeTo(i)
        }
      })
    },
    onChange (index) {
      // 在轮播图切换时,将索引保存到数据中
      this.index = index
    },
    onClickLeft () {
      this.$router.back()
    },
    onSelect (v) {
      // console.log(v.path)
      this.$router.push(v.path)
    },
    onAddCart () {
      addCart({
        userId: sessionStorage.getItem('userId'),
        proId: this.$route.params.id,
        num: 1
      }).then(data => {
        if (data.data.code !== 202) {
          Toast('添加购物车成功')
        } else {
          Toast('添加购物车失败')
        }
      })
    }
  }
}
</script>

<style lang="scss">
.detailBox{
  overflow: auto;
}
.detail-nav-bar1, .detail-nav-bar2{
  width: 100vw;
  position: fixed;
  &::after{
    border-bottom: none;
  }
  .van-nav-bar__left, .van-nav-bar__right{
    border-radius: 50%;
    background: #222;
    padding: 0;
    width: 0.4rem;
    height: 0.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: static;
    i{
      color: #fff;
    }
  }
}
.detail-nav-bar1{
  background: none;
}
.detail-nav-bar2{
  background: #fff;
  opacity: 0;
  .van-nav-bar__left, .van-nav-bar__right{
    background: none;
    i{
      color: #000;
    }
  }
}
</style>
